<template>
  <div class="confirm">
    <nav-bar class="top">
      <p slot="text">确认订单</p>
    </nav-bar>
    <!-- 地址 -->
    <router-link
      class="address"
      :to="{ path: '/user/address', query: { isClick: 1 } }"
    >
      <div class="add_address">
        <div class="content" v-if="selectaddress">
          <div class="text">
            {{ selectaddress.address }}
            {{ selectaddress.address_detail }}
          </div>
          <div class="user_info">
            <span>{{ selectaddress.user_name }}</span>
            <span>{{ selectaddress.sex == 1 ? '先生' : '女士' }}</span>
            <span>{{ selectaddress.phone }}</span>
          </div>
        </div>
        <span v-else>添加收货地址</span>
        <i class="iconfont icon-zuojiantou"></i>
      </div>
      <img src="@/assets/images/bg_address.png" alt="" />
    </router-link>
    <!-- 食品列表 -->
    <section class="container">
      <header>
        <p class="shop_name">{{ shopDetail.name }}</p>
        <span>桔子专送</span>
      </header>
      <ul class="food_list">
        <li v-for="(item, index) in foodList" :key="index">
          <img :src="imageUrl + item.food_img" alt="" />
          <div class="content">
            <p class="food_name">{{ item.name }}</p>
            <p>规格：{{ item.select || '无' }}</p>
            <p>x{{ item.num }}</p>
            <span class="price">¥{{ item.price }}</span>
          </div>
        </li>
        <li class="lili">
          <span>包装费</span>
          <span>¥{{ packFee }}</span>
        </li>
        <li class="lili">
          <span>配送费</span>
          <span>¥{{ shopDetail.delivery_fee }}</span>
        </li>
      </ul>
      <div class="total_price">
        <span>总价格 ¥{{ totalPrice }}</span>
        <span>需支付 ¥{{ totalPrice }}</span>
      </div>
    </section>
    <!-- 选项 -->
    <div class="option_container">
      <li>
        <span>支付方式</span>
        <span class="right">在线支付</span>
      </li>
      <li>
        <span>红包</span>
        <span class="right">暂时不支持</span>
      </li>
      <li>
        <router-link to="/confirmOrder/remarks">
          <span>备注</span>
          <span class="right" v-if="remarkInfo">{{ remarkInfo }}</span>
          <span class="right" v-else>口味、偏好等</span>
        </router-link>
      </li>
      <li>
        <span>发票</span>
        <span class="right">不需要开发票</span>
      </li>
    </div>
    <!-- 底部 -->
    <footer class="confirm_order">
      <div class="price left">
        合计：<span>¥{{ totalPrice }}</span>
      </div>
      <button class="right" @click="submitOrder">提交订单</button>
    </footer>
    <transition name="loading">
      <v-loading v-if="showLoading" />
    </transition>
    <transition>
      <router-view />
    </transition>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { Local } from '@/common/storage';
import { imageUrl } from '@/config/env';
import { getShopDetail, getAddressFirst, addOrder } from '@/network/getData';

export default {
  data() {
    return {
      showLoading: true,
      imageUrl, // 图片地址
      shop_id: null, // 店铺ID
      lat: '', // 经度
      lng: '', // 纬度
      foodList: [], // 食品列表
      shopDetail: {}, // 店铺详细
      addressInfo: {} // 地址信息
    };
  },
  created() {
    const { shopId, lat, lng } = this.$route.query;
    this.shop_id = shopId;
    this.lat = lat;
    this.lng = lng;
    this.SAVE_SHOP_ID(this.shop_id);
  },
  mounted() {
    this.initData();
  },
  computed: {
    ...mapState(['userInfo', 'remarkInfo', 'selectaddress']),
    // 包装费
    packFee() {
      if (this.foodList) {
        let num = 0;
        this.foodList.forEach(item => {
          num += item.pack_fee;
        });
        return num;
      }
      return 0;
    },
    // 总价格
    totalPrice() {
      if (this.foodList) {
        let price = 0;
        this.foodList.forEach(item => {
          price += item.num * item.price;
        });
        const num = price + this.packFee + this.shopDetail.delivery_fee;
        return num;
      }
      return 0;
    }
  },
  methods: {
    ...mapMutations(['SAVE_SHOP_ID', 'SELECT_ADDRESS']),
    // 初始化数据
    async initData() {
      const result = await getShopDetail(this.shop_id);
      this.shopDetail = result.data;
      this.foodList = Local.get('confirmOrder');
      this.initAddress();
      this.showLoading = false;
    },
    // 获取用户地址
    async initAddress() {
      if (this.userInfo && this.userInfo.id) {
        if (!this.selectaddress.id) {
          const address = await getAddressFirst(this.userInfo.id);
          this.SELECT_ADDRESS(address.data);
        }
      }
    },
    // 提交订单
    submitOrder() {
      if (!(this.userInfo && this.userInfo.id)) {
        this.$confirm({ title: '请登录' });
        return false;
      } else if (!this.selectaddress.id) {
        this.$confirm({ title: '请选择收货地址' });
        return false;
      }

      const obj = {
        shop_id: this.shop_id,
        user_id: this.userInfo.id,
        address_id: this.selectaddress.id,
        remark: this.remarkInfo,
        price: this.totalPrice,
        delivery_fee: this.shopDetail.delivery_fee,
        shop_name: this.shopDetail.name,
        shop_img: this.shopDetail.shop_avatar,
        foodList: this.foodList
      };

      addOrder(obj).then(res => {
        if (res.code === 200) {
          this.$router.push({
            path: '/payment',
            query: {
              shop_id: this.shop_id
            }
          });
        }
      });
    }
  },
  watch: {
    userInfo(value) {
      if (value && value.id) {
        this.initData();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.confirm {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overflow: scroll;
}

.address {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 55px;
  background-color: #fff;
  .add_address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 10px 10px 15px;
    color: #222;
    .user_info {
      margin-top: 5px;
      font-size: var(--font-min);
      span {
        margin-right: 10px;
      }
    }
    i {
      transform: rotate(180deg);
    }
  }
  img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
  }
}
.container {
  margin-top: 15px;
  padding-top: 10px;
  background-color: #fff;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    padding: 0 10px;
    span {
      width: 54px;
      height: 16px;
      font-size: var(--font-min);
      padding: 1px 3px 0;
      border-radius: 5px;
      color: #000;
      background-color: var(--color-base);
    }
  }
  .food_list {
    padding: 10px;
    li {
      display: flex;
      margin-bottom: 10px;
      padding: 2px 0;
      background-color: #f7f7f7;
      img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        margin-right: 10px;
      }
      .content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        font-size: var(--font-min);
        .food_name {
          font-size: var(--font-size);
          color: #222;
        }
        .price {
          position: absolute;
          right: 10px;
          bottom: 5px;
          color: #222;
        }
      }
    }
    li:last-of-type {
      margin-bottom: 0;
    }
  }
  .lili {
    justify-content: space-between;
    padding-right: 10px !important;
    font-size: var(--font-size);
    background-color: #fff !important;
  }
  .total_price {
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: var(--font-size);
    span:last-of-type {
      color: #fa4c42;
    }
  }
}
.option_container {
  margin-top: 15px;
  padding-bottom: 55px;
  background-color: #fff;
  li {
    display: inline-block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    font-size: var(--font-size);
    border-top: 1px solid #eee;
    span:last-of-type {
      color: #999;
    }
  }
  li:last-of-type {
    border-bottom: 1px solid #eee;
  }
}
.confirm_order {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45px;
  line-height: 45px;
  background-color: #222;
  .price {
    margin-left: 10px;
    color: #fff;
  }
  button {
    line-height: 45px;
    padding: 0 15px;
    background-color: var(--color-base);
  }
}
</style>
